import Vue from 'vue'
const MyPlugin = {
    install(Vue, options) {
        Vue.component('heading', {
            functional: true, //标记函数式组件
            props: ['level', 'title', 'icon'],
            render(h, context) {
                // 函数式组件 没有this,只有上下文context
                //子组件节点
                let children = [];
                // 属性获取 
                const { icon, title, level } = context.props;

                // 添加图标功能 // <svg><use xlink:use="#icon-xxx"></use></svg> 
                if (icon) {
                    children.push(h('svg', { class: 'icon' }, [h('use', { attrs: { 'xlink:href': '#icon-' + icon } })]))
                }
                let vnode = h(
                    'h' + level,
                    { attrs: { title } }, // 之前省略了title的处理
                    children = children.concat(context.children)// 子组件节点
                )
                return vnode;
            }
        })

    }
}
//使用Vue.use即可引入插件
Vue.use(MyPlugin);